<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        #search{
            margin-bottom: 10px;
            padding: 10px 0px;
        }
    </style>
</head>
<body>
<div id="app" class="demo-input-size">

    <div id="search">
        <el-select v-model="searchInfo.newsColumn" placeholder="请选择新闻栏目">
            <el-option
                    v-for="(c,i) in columnArr"
                    :label="c.cname"
                    :value="c.id">
            </el-option>
        </el-select>
        <el-input
                size="medium"
                placeholder="请输入发布人姓名"
                suffix-icon="el-icon-user-solid"
                style="display: inline-block;width: 250px"
                v-model="searchInfo.newsName">
        </el-input>
        <el-select v-model="searchInfo.newsConditionid" placeholder="请选择审核状态">
            <el-option
                    v-for="(c,i) in conditionArr"
                    :label="c.ccondition"
                    :value="c.id">
            </el-option>
        </el-select>

        <el-button type="primary" round icon="el-icon-search" @click="searchNews()">
            搜索
        </el-button>
        <el-button type="primary" round icon="el-icon-refresh" @click="reload" round></el-button>
    </div>

    <el-table
            :data="newsArr"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="newsColumn.cname"
                label="新闻栏目"
                width="120">
        </el-table-column>
        <el-table-column
                prop="nuser"
                label="发布人">
        </el-table-column>
        <el-table-column
                prop="title"
                label="新闻标题">
        </el-table-column>
        <el-table-column
                prop="publicDate"
                label="发布时间">
        </el-table-column>
        <el-table-column
                prop="updateDate"
                label="新闻修改时间">
        </el-table-column>

        <el-table-column
                prop="newsCondition.ccondition"
                label="审核状态">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="280">
            <template slot-scope="scope">
                <el-link @click="showNews(scope.row.id)">
                    查看 <i class="el-icon-view el-icon--right"></i>
                </el-link>

                <el-button  size="small" type="primary" icon="el-icon-edit" @click="showupdateNews(scope.row.id)" plain>
                    修改
                </el-button>

                <el-button @click="deleteNews(scope.row.id)" size="small" type="danger" icon="el-icon-delete" plain>
                    删除
                </el-button>
                <span v-if="scope.row.newsCondition.id==3">
                    <el-button type="warning" size="small" @click="checkFailConditionDialog(scope.row.id)" plain>审核不通过，请查看拒绝理由</el-button>
                </span>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            background
            @current-change="handleCurrentChange"
            layout="prev, pager, next"
            :total="totalCount">
    </el-pagination>


    <el-dialog title="不通过的原因" :visible.sync="checkdialogFormVisible">
        <el-form :model="newsInfo" ref="newsInfo">
            <el-form-item prop="reasonForReview">
                <el-input v-model="newsInfo.reasonForReview"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="checkdialogFormVisible = false">取 消</el-button>
        </div>
    </el-dialog>

</div>
<script>

    var haha = new Vue({
        el:"#app",
        data: {
            searchInfo: {
                newsName: '',
                newsColumn: '',
                newsConditionid: ''
            },
            columnArr: [],
            newsArr: [],
            conditionArr: [],
            totalCount: 0,
            dialogFormVisible: false,
            updateDialogFormVisible: false,
            newsInfo: {},
            checkdialogFormVisible: false,
        },
        methods:{
            checkFailConditionDialog(id){
                $.get("/demo/news/getNews/" + id, function (backData) {
                    haha.newsInfo = backData.data;
                    haha.checkdialogFormVisible = true;
                });
            },
            reload:function () {
              window.location.reload();
            },
            showupdateNews(id) {
                window.location.href = "/demo/news/newsUpdateNews.html?id=" + id;
            },
            showNews(id) {
                window.location.href = "/demo/news/viewNewsNontent.html?id=" + id;
            },
            deleteNews(id) {
                haha.$confirm('此操作将永久删除, 是否继续?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    $.get("/demo/news/deleteNews/" + id , function (backData) {
                        haha.$message.success(backData.msg);
                        getData(1, 10);
                    })
                });
            },
            searchNews() {
                getData(1, 10);
            },
            handleCurrentChange(val){
                getData(val, 10);
            },
        }

    });

    function getData(a, b) {
        haha.searchInfo.npageNumber = a;
        haha.searchInfo.pageCount = b;
        $.get("/demo/news/list", haha.searchInfo, function (backData) {
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
            $.get("/demo/column/newsListNewsColumn", function (backData) {
                haha.columnArr = backData.data;
            });
        });
        $.get("/demo/news/list", haha.searchInfo, function (backData) {
            haha.newsArr = backData.data.currentData;
            haha.totalCount = backData.data.totalCount;
            $.get("/demo/condition/newsConditionList", function (backData) {
                haha.conditionArr = backData.data;
            });
        })
    }
    getData(1,10);

</script>



</body>
</html>